<template>
    <section class="main-upload-img">
        <!-- <div class="menu-wrapper">
            <nuxt-link to="/adv-assets">
                <div class="item" :class="{ active: managerIndex == 0}">图片素材</div>
            </nuxt-link>
            <nuxt-link to="/adv-assets/video">
                <div class="item" :class="{ active: managerIndex == 1}">视频素材</div>
            </nuxt-link>
            <nuxt-link to="/adv-assets/Audience">
                <div class="item" :class="{ active: managerIndex == 2}">受众管理</div>
            </nuxt-link>
        </div> -->

		<div class="operator-upload-and-search">
			<el-button type="primary" @click="showUploadImg" class="btn_common_yellow"><i class="iconfont icon-cloud-upload"></i> 上传图片</el-button>
			<el-input class="find-file" @keyup.enter.native='searchNa' placeholder="请输入图片名称" icon="search" v-model='searchName' :on-icon-click="searchNa">
			</el-input>
		</div>
		<upload type="img"/>
		<div class="img-container">
			<div class="r">
				<b class="img-params"><span class="iconfont icon-focus"></span> 推荐图片参数：</b>
				<div>
					<b>FB大图：</b> 图片大小不能大于3M <br /> 图片尺寸至少:
					<br /> 600 * 315 像素<br /> 推荐图片尺寸:
					<br /> 1200 * 628 像素<br /> 图片长宽比: 1.91:1<br /> 图片文字不能超过20%
					<br />
				</div>
				<div>
					<b>Instagram图片：</b> 图片大小不能大于3M
					<br /> 图片尺寸至少:
					<br /> 600 * 315 像素<br /> 推荐图片尺寸:
					<br /> 1080 * 1080 像素<br /> 图片长宽比:1:1
					<br /> 图片文字不能超过20%<br />
				</div>
			</div>
			<ul class="l" >
				<loading v-if='loadingShow' :customClass="customLoading" />
				<li  v-if='showType == 0 && item.imgUrl!=null' v-for="(item,index) in data" :class="item.showBold?'imgShow':''">
					<div class="img-div" @mouseenter='showThis(item)' @mouseleave='hideThis(item)'>
						<img 
						v-lazy="item.imgUrl" 
						:index='index'  
						v-if='item.imgUrl!=null'
						:class="item.css?'img-width':'img-height'"/>
						<div class="upload-operator" v-show='item.show && item.ashow'>
						  <span class="iconfont icon-review" v-show='item.ashows' @click="handlePictureCardPreview(item)" style="margin-right: 16px;"></span>
						  <span class="iconfont icon-del" @click="handleRemove(item.id,item.key)"></span>
						</div>
						<div class="upload-mask" v-show='item.show && item.ashow'>			
						</div>
					</div>
					
					<div class="file-tips">{{item.width}}*{{item.height}}</div>
					<div class="for-show" v-show="!item.onEdit">
						<div class="ellipsis-text">
							<span class="txt" :style="'max-width:'+(item.widthA-45)+'px!important'" @click="edit(item,$event)">{{item.imgName}}</span> 
							<span class="iconfont icon-edit" @click="edit(item,$event)" style="color:#B0BEC5;"></span>
						</div>
					</div>
					<el-input :class="item.onEdit ? 'v' : 'vh'" v-model="item.imgName" :value="item.imgName" @focus="focus(item)" icon="close" @blur="blur(item, $event)" :on-icon-click="($event)=>{
                        del(item,$event)
                      }"></el-input>
				</li>
				<div class="no-data" v-if='showType == 1'>
						<img src="../../assets/img/no-img.png"><br>
            <span >暂无图片</span>
        </div>
        <div class="no-data" v-if='showType == 2'>
						<img src="../../assets/img/no-data.png"><br>
            <span>查询无数据</span>
        </div>
			</ul>
      <div v-if='maskShow' class="mask-head" @click='maskShowChange'>
      	<div>
      		<!--<i class="el-icon-close" style="cursor: pointer"></i>-->
      		<img width="100%" :src="dialogImageUrl" alt="" @click.stop>
      	</div>
      	
      </div>
      <div style="margin-top: 10px;"></div>
			<el-pagination
							style='text-align: right;margin-right: 250px;'
							v-if='showPage'
	            class="pagination"
							@size-change="handleSizeChange"
	            @current-change="handleCurrentChange"
	            :current-page="page.currentPage"
	            :page-sizes="[9, 18, 27, 36]"
	            :page-size="page.size"
	            layout="prev, pager, next, sizes, jumper"
	            :total="page.total">
	    </el-pagination>
		</div>

	</section>
</template>

<script>
	import Vue from 'vue';
	import upload from '~components/upload/upload.vue';	
	import { isInteger , getDate , changeParam, getParam} from '~/assets/js/global'
	import loading from '~components/loading.vue';
	import {
		Input,
		Pagination,
		Button,
		Message,
	} from 'element-ui';
	Vue.use(Input);
	Vue.use(Button);
	Vue.use(Pagination);
	export default {
		data() {
			return {
				customLoading : 'left:500px; position:absolute;',
				searchName:'',
				managerIndex: 0,
				dialogImageUrl: '',
				loadingShow:true,
				maskShow: false,
				page: {   // 每页可选条数列表,
                    total: 0,
                    currentPage: 1,
                    size: 9
                },
				data: [],
				showPage: false,//无数据隐藏分页
				showType: 0,//无数据类型
				typeList: 0,//判断是否为查询，0列表，1查询

			}
		},
		watch: {
			$route() {
				this.getDateSize()
			}
		},
		components: {
			upload,
			loading,
		},
		methods: {
			blur(item, e) {
        setTimeout(()=>{
            if(item.del){
                item.imgName = '';
                item.onEdit = true;
                this.iconClose(item);
                item.del = false;
                return;
            }else{
            		if (item.imgName == '') {
            			item.imgName = item.nameBefore 
            			item.onEdit = false;           			
            		}else {
            			item.onEdit = false;
            			this.$store.dispatch("changeImgName",{  
            			    imgName : item.imgName,
            			    id: item.id
            			}).then(res=>{
            			    
            			})
            		}
            }

        },500)
			},
			del(item, e) {
				item.del = true;
        this.eventItem = e;
			},
			focus(item) {
				//setTimeout(()=>{
				item.onEdit = true;
				if (item.imgName != '') {
					Vue.set(item,'nameBefore',item.imgName)
				}
				//},100)
			},
			iconClose(item){
			    let input = this.eventItem.target.parentNode.querySelectorAll('input')[0];
			    input.focus();
			    
			 },
			handleCurrentChange(val) {
          this.page.currentPage = val;
          // changeParam('page',val);
          this.getImgsList();
      },
      handleSizeChange(val) {
      	this.page.size = val;
      	// changeParam('pageSize',val);
         this.getImgsList();
      },
      handlePictureCardPreview(file) {
      	 this.dialogImageUrl = file.imgUrl;
      	 file.show =false
      	 this.maskShow = true
      },
      maskShowChange() {
      	this.maskShow = false
      },
      showThis(item) {
      	item.show = true
      },
      hideThis(item) {
      	item.show = false
      },
      handleRemove(id,key) {
					this.loadingShow = true 
      		this.$store.dispatch("deleteAddImg",{  
                  id:id
                  }).then(res=>{                  
                   this.getImgsList()
                })
              this.data.forEach((n,i)=>{
                if(n.id == id){
                  this.data.splice(i,1);
                  return;
                }                
              });
              for(let i in this.data){
              	Vue.set(this.data[i],'showBold',true)
              	if ((i+1)%3 == 0) {
              		Vue.set(this.data[i],'showBold',false)
              	}//处理第三张图，没有margin
              }
       },
			uploadImgSuccess(list){
				
				this.lazy()
				this.getImgsList()
			},
			whenWeSave() {
				this.loadingShow = true
			},
			lazy() {
			    this.$Lazyload.$off('loaded')
			    this.$Lazyload.$off('error')
			    this.$Lazyload.$on('loaded', this.handel)
			    this.$Lazyload.$on('error', this.handels)
			},
			edit(item, e) {
				item.onEdit = true;
				let input = e.target.parentNode.parentNode.parentNode.querySelectorAll('input')[0];
				setTimeout(() => {
					input.focus();
				}, 0);
			},
			showUploadImg() {
				this.$store.commit('SHOW_POPOVER_UPLOAD_IMG', {
					showPopoverUploadImg: true
				})
			},
			getImgsList() {
				this.loadingShow = true
				var ulWidth = 892.6
				var widtha = 0
				this.$store.dispatch("seachAddImg",{
        		imgName:this.searchName,
		    		pageNum:this.page.currentPage,
		    		pageSize:this.page.size,
	        	}).then(res=>{
        			this.lazy()
	        		if (res.data.data) {
	        			this.data = res.data.data.list
	      				this.page.total = res.data.data.total
	        		}else {
	        			this.data = []
	        			this.page.total = 0
	        		}	      			
	      			this.loadingShow = false
	      			if (this.data.length == 0 ) {
	      				if (this.typeList ==0) {
	      					this.showType = 1
	      				}else{
	      					this.showType = 2
	      				}
	      				this.showPage = false				
	      			}else {
	      				this.showType = 0
	      				this.showPage = true	
	      			}
	      			for(let a in res.data.data.list){
	      				Vue.set(this.data[a],'onEdit',false)
	      				Vue.set(this.data[a],'show',false)//鼠标覆盖可操作控制属性
	      				Vue.set(this.data[a],'ashow',false)//图片加载可操作控制属性
	      				Vue.set(this.data[a],'ashows',true)//图片加载失败不可浏览控制属性
	      				Vue.set(this.data[a],'showBold',true)//边缘图片margin控制属性
	      				Vue.set(this.data[a],'css',true)//根据图片宽高判断图片根据高宽那个比，true根据宽
	      				//计算实际显示宽
	      				var widthA = (parseInt(this.data[a].width)*160)/parseInt(this.data[a].height)
	      				if (widthA > 0) {
	      					widthA = widthA
	      				}else {
	      					widthA = 0
									Vue.set(this.data[a],'showBold',false)
	      				}//处理空数据
	      				if ((a+1)%3 == 0) {
	      					Vue.set(this.data[a],'showBold',false)
	      				}//处理第三张图，没有margin
	      				if (widthA > 290) {
	      					Vue.set(this.data[a],'css',false)
	      				}//处理图片宽高适应
	      			}
		    	}).catch(()=>{
		    		this.data = []
		    		this.page.total = 0
	      		this.loadingShow = false
		    		if (this.typeList ==0) {
		    			this.showType = 1
		    		}else{
		    			this.showType = 2
		    		}
		    		this.showPage = false	
		    	})
			},
			
			handel({el, naturalHeight, naturalWidth, $parent, src, loading, error, }, formCache) {
			  	if (el.attributes['index']) {
			  		var index = el.attributes['index'].value
		      	Vue.set(this.data[index],'ashow',true)
			  	}
			},
			handels({el, naturalHeight, naturalWidth, $parent, src, loading, error, }, formCache) {
			  	if (el.attributes['index']) {
			  		var index = el.attributes['index'].value
		      	Vue.set(this.data[index],'ashow',true)
		      	Vue.set(this.data[index],'ashows',false)
			  	}
			},
      searchNa() {
      	this.typeList = 1
      	this.getImgsList()
      },
      getDateSize() {
  	    if(getParam('page')) {
  	        this.page.currentPage = parseInt(getParam('page'));
  	    }else {
  	    	this.page.currentPage = 1
  	    }
  	    if(getParam('pageSize')){
  	        this.page.size = parseInt(getParam('pageSize'));
  	    }else {
  	    	this.page.size = 9
  	    }	    
      },
		},
		computed: {},
		created() {		
			if (process.BROWSER_BUILD ) {	
				this.getDateSize()
				this.getImgsList()
			}
		},
		mounted() {
			
		},
	}
</script>

<style scoped lang="scss">
  .icon-no {
  	font-size: 150px;
  }
	img[lazy=loading] {
    height: 18px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
  }
  img[lazy=error] {
    height: 18px;
    width:24px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
  }
  .mask-head {
  	position: fixed;
  	background-color: rgba(0, 0, 0, 0.84);
  	width: 100%;
  	height: 100%;
  	right: 0;
		text-align: center;
  	top: 0;
  	z-index: 1;
  	div {
			width: 50%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			i {
				position: absolute;
				top: 0;
				right: 0;
				color: #fff;
				transform: translate(-20%,-150%);
			}
			img {
				width: 100%;
				max-height: 700px;
			}
  	}
  }
	.menu-wrapper {
		height: 50px;
		background: #FFFFFF;
		border: 1px solid #EAEEF0;
		border-radius: 4px 4px 0 0;
		.item {
			height: 47px;
			font-size: 16px;
			color: #666666;
			letter-spacing: 0;
			line-height: 50px;
			float: left;
			margin: 0 25px;
			cursor: pointer;
		}
		.item.active {
			font-family: STHeitiSC-Light;
			color: #0686F9;
			border-bottom: 3px solid #0686F9;
		}
	}
	
	.operator-upload-and-search {
		width:100%;height:80px;background: #FFFFFF;
		.btn_common_yellow {
			width:120px;height:34px;background:#ffb100;border-radius:100px;outline:none;border:0;margin-left:23px;margin-top:23px;float:left
		}
		.btn_common_yellow:hover{background:#e59e00}
		.el-input {width: 320px;margin-left: 15px;float:left;margin-top:22px}
	}
	
	.main-upload-img {
		background-color: #fff;
		overflow: hidden;
	}
	
	.find-file {
		width: 320px;
		margin-left: 15px;
	}
	
	.img-container {
		overflow: hidden;
		margin: 0 0 24px 24px;
	}
	
	.img-container .l {
		overflow: hidden;
		background: #FFFFFF;
		border: 1px solid #EAEEF0;
		border-radius: 4px;
		padding: 20px 28px;
		min-height: 370px;
		width: 902px;
		position: relative;
		/*display:flex;
    flex-direction: row;
    justify-content: space-around;

    align-content: space-between;
    align-items:stretch;*/
    .img-div {
    	height: 160px;overflow:hidden;position:relative;
    	width: 294px;
    	.img-width[lazy=loaded] {
    	  width: 100%;
    	  -ms-interpolation-mode: bicubic;
    	  vertical-align: middle;
    	  border:none 0;
    	  position: absolute;
    	  left: 50%;
    	  top: 50%;
    	  transform: translate(-50%,-50%);
    	}
    	.img-height[lazy=loaded] {
    	  height: 100%;
    	  -ms-interpolation-mode: bicubic;
    	  vertical-align: middle;
    	  border:none 0;
    	  position: absolute;
    	  left: 50%;
    	  top: 50%;
    	  transform: translate(-50%,-50%);
    	}
    }
    .upload-operator{
			z-index: 110;
      position: absolute;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
      width: 100%;
      text-align: center;
      height: 100%;
      white-space: nowrap;
      span{
        color:#fff;
        font-size:24px;
        display: inline-block;
        vertical-align: middle;
        margin-top: 66px;
        cursor: pointer;
      }
    }
    .upload-mask {
			z-index: 10;
      position: absolute;
      left: 50%;
      top: 50%;
      transform:translate(-50%,-50%);
      width: 100%;
      text-align: center;
      height: 100%;
    	background-color:#000;
    	opacity: .3;
    }
    .no-data {
    	text-align: center;
    	margin: 60px 0 0;
    	img {
				width: 150px;
    	}
    	span {
    		font-size: 13px;
    		color: #0686F9;
    		letter-spacing: 0; 
    		margin: 29px 0 0 0;
    		display:inline-block;
    	}
    }
	}

	.v{
	    visibility:visable;
	}
	.vh{
	    visibility:hidden;
	}
	.img-container .l li{
	    position:relative;
	    float: left;
	    overflow: hidden;
	}
	.imgShow{
		margin:0 10px 0 0;
	}
	.img-container .l li img{
	    display: block;
	    overflow: hidden;
	}
	.img-container .r{
	    color:#666;
	    float: right;
	    margin: 0 63px 0 32px;
	    line-height: 20px;
	    width: 121px;
	    position: relative;
	}
	.img-container .r b{
	    vertical-align: middle;
	    display: block;
	    margin-top: 15px;
	    span{
				position: absolute;
				left: -16px;
				width: 11px;
				height: 16px;
	    }
	}

	.img-container .r b.img-params{
	    margin-top: 0;
	}
	.img-container .r div{
	    color: #666666;
	    margin-top: 15px;
	}
	.img-container .r b span{
	    color: #FFB100;
	    font-size: 10px;
	    vertical-align: middle;
	}

	.for-show{
	    text-align: center;
	    padding:10px 0;
	    line-height: 20px;
	    vertical-align: middle;
	    color:#333;
	    width: 100%;
	    font-size: 13px;
	    position:absolute;
	    overflow: hidden;
	    span{
	        vertical-align: top;
	    }
	}

	.img-container .el-input{
	    margin:2px 0;
	}
	.ellipsis-text span {
		cursor: pointer;
	}
	.txt{
	    max-width:200px;
	    position:relative;
	    padding-right:10px;
	    display: inline-block;
	    overflow:hidden;
	    text-overflow:ellipsis;
	    -o-text-overflow:ellipsis;
	    -webkit-text-overflow:ellipsis;
	    -moz-text-overflow:ellipsis;
	    white-space:nowrap;
	}

	.file-tips{
	    height: 24px;
	    opacity: .8;
	    background-color:#333;
	    position:absolute;
	    border-radius:4px;
	    line-height: 24px;
	    color:#fff;
	    padding:0 10px;
	    right:10px;
	    bottom:50px;
	}

</style>


